Магазин ноутбуков «Норд»

01Что нужно сделать

Использовать готовые HTML-страницы как образец интерфейса. Заменить демонстрационные данные данными из базы, подключить формы, поиск, фильтры и пагинацию. Общие части страниц вынести в шаблоны.

Стек проекта: Laravel, Blade, MySQL, Tailwind CSS и Alpine.js. Для регистрации и восстановления пароля использовать Laravel Breeze, для графиков — Chart.js. Сохранить внешний вид и адаптивность предоставленной вёрстки.

• Гость просматривает товары и собирает корзину. Для оформления заказа нужно войти; после входа корзина сохраняется.
• Покупатель оформляет заказы, видит только свои покупки, пишет сообщения по заказам и оставляет отзывы.
• Менеджер работает со всеми заказами, отвечает покупателям и удаляет отзывы. Управление товарами, пользователями и аналитика ему недоступны.
• Администратор имеет возможности менеджера, управляет товарами, брендами и ролями пользователей, смотрит продажи.
• Права проверяются на сервере, включая доступ по прямой ссылке. При регистрации создаётся только покупатель.
• Формы проверяются на сервере. При ошибке показать понятное сообщение и сохранить введённые данные, кроме паролей.

Заказ: новый → подтверждён → в пути → доставлен. Отмена возможна до доставки; покупатель может отменить только новый заказ.

При оформлении повторно проверить цены и наличие, списать заказанное количество со склада. В заказе сохранить названия, цены и контакты на момент покупки: дальнейшие изменения товара или профиля не меняют старый заказ. При отмене вернуть остатки один раз. Повторная отправка формы не должна создавать второй заказ.

Поиск, фильтрация, сортировка и пагинация выполняются на бэкенде. Параметры каталога передаются через URL и сохраняются при переключении страниц. JavaScript используется для элементов интерфейса: меню, галереи, раскрытия фильтра и выбора оценки.

02Витрина

В шапке — логотип, каталог, поиск, корзина со счётчиком и вход в нужный кабинет. В подвале — ссылки на информационные страницы и контакты. Публикуются только доступные для показа товары.

Главная home.html

Показать основной баннер, 8 последних опубликованных ноутбуков, бренды и этапы покупки. Кнопка баннера ведёт в каталог, карточка — на соответствующий товар, бренд — в каталог с выбранным брендом.

Каталог catalog.html

Выводить по 12 товаров на странице. Поиск работает по названию. Фильтры: бренд, цена от–до, процессор, тип видеокарты, оперативная память, накопитель, диагональ и наличие. Применение — кнопкой, сброс очищает фильтры. Поддержать сортировку по новизне, цене и рейтингу, а также пагинацию. Выбранные значения сохраняются в форме; при отсутствии результатов показать сообщение. Быстрые подборки: работа — встроенная графика, учёба — до 80 000 ₽, игры — дискретная графика, «Всегда с собой» — экран до 14″ включительно.

Карточка ноутбука product.html

Показывать данные выбранного товара: фотографии с переключением, название, цену, наличие, характеристики, описание, среднюю оценку и отзывы с автором и датой. Кнопка добавляет товар в корзину; при нулевом остатке покупка недоступна. Вошедший пользователь может оставить оценку 1–5 и текст, затем исправить или удалить свой отзыв. Один отзыв на пользователя и товар. Гостю предложить войти. Несуществующий или снятый с публикации товар не открывается как доступная карточка.

Корзина cart.html

Показать добавленные товары, количество, цену за единицу, сумму строки и общий итог. Количество можно изменить в пределах остатка, товар — удалить. Повторное добавление увеличивает количество. Корзина сохраняется между переходами по сайту. Кнопка оформления ведёт на оформление либо на вход с последующим возвратом.

Пустая корзина cart-empty.html

Это состояние страницы корзины, когда товаров нет или удалён последний товар. Показывать пояснение и ссылку в каталог; оформление недоступно.

Оформление checkout.html

Доступно после входа и только с непустой корзиной. Показать состав заказа и итог; имя, телефон, город и адрес обязательны, комментарий — необязателен. Данные профиля подставляются с возможностью изменения. После подтверждения создать заказ со статусом «Новый», очистить корзину и открыть его страницу в кабинете. Если остатка не хватает, сообщить об этом и не создавать заказ.

Доставка и оплата delivery.html

Статическая страница со сроками доставки и условиями оплаты при получении. Кнопка выбора ноутбука ведёт в каталог.

Обмен и возврат returns.html

Статическая страница с порядком обращения, обмена, возврата и гарантии. Ссылка на заказы открывает кабинет, а для гостя — вход.

О магазине about.html

Краткое описание магазина, преимуществ и самовывоза. Ссылка на каталог работает.

Контакты contacts.html

Показать телефон, почту, адрес и часы работы. Телефон и почта — активные ссылки, ссылка на карту открывает адрес. Интерактивную карту встраивать не требуется.

Оферта offer.html

Статическая страница с текстом условий покупки, доступная из подвала и оформления.

Конфиденциальность privacy.html

Статическая страница с текстом об обработке данных, доступная из подвала.

03Регистрация и вход

Вход login.html

Вход по почте и паролю. При неверных данных показать ошибку. После входа вернуть пользователя на запрошенную закрытую страницу либо в кабинет по роли. Добавить выход из аккаунта.

Регистрация register.html

Имя, уникальная почта, пароль и его подтверждение. После успешной регистрации создать покупателя и выполнить вход. Выбора роли в форме нет.

Запрос сброса пароля forgot-password.html

По почте отправить ссылку для восстановления и показать подтверждение. При локальной разработке письмо можно записывать в лог Laravel.

Новый пароль reset-password.html

По действующей ссылке пользователь задаёт и подтверждает новый пароль. Недействительная или истёкшая ссылка не позволяет изменить пароль. После успеха предложить вход.

Подтверждение почты и вход через социальные сети не нужны.

04Кабинет покупателя

Общее меню: обзор, заказы, профиль и выход. Пользователь видит только свои данные и заказы.

Обзор account.html

Показать имя, несколько последних заказов и заметное уведомление о непрочитанном ответе менеджера. Из обзора можно открыть заказ или полный список покупок. Если заказов нет — предложить перейти в каталог.

Мои заказы account-orders.html

Список от новых к старым: номер, дата, товар, сумма, статус и отметка о непрочитанном сообщении. При большом количестве — пагинация. Каждая запись открывает соответствующий заказ.

Мой заказ account-order.html

Показать состав, итог, сохранённые контакты, адрес и текущий этап заказа. Новый заказ можно отменить с подтверждением; после отмены статус и остатки обновляются. Ниже — переписка с магазином и форма текстового сообщения. После открытия заказа ответ магазина считается прочитанным.

Профиль account-profile.html

Редактирование имени, почты, телефона, города и адреса. Эти данные используются при следующих покупках. Смена пароля — отдельная форма с текущим паролем, новым паролем и подтверждением. Показывать результат сохранения или ошибки.

Переписка ведётся внутри заказа: текст, автор и дата. Покупатель видит имя сотрудника. Отправка — обычной формой с обновлением страницы; вложения и чат в реальном времени не нужны.

05Кабинет менеджера

Доступен менеджеру и администратору. Отдельное меню без шапки витрины.

Сводка manager.html

Показать количество новых заказов, заказов в пути и ожидающих ответа. Ниже — новые заказы и обращения покупателей. Нажатие на заказ открывает его детали.

Все заказы manager-orders.html

Таблица заказов с покупателем, суммой и статусом. Поддержать фильтр по статусу и пагинацию. Выделять заказы, в которых последнее сообщение написал покупатель.

Работа с заказом manager-order.html

Показать товары, сумму, контакты, адрес и комментарий покупателя. Менеджер меняет статус и отвечает в переписке. Статусы идут по этапам заказа; доставленные и отменённые заказы завершают обработку. Отмена возвращает остатки, повторное сохранение статуса не списывает и не возвращает их снова.

Отзывы manager-reviews.html

Список отзывов с товаром, автором, оценкой, текстом и датой. Отзыв можно удалить после подтверждения. После удаления пересчитать среднюю оценку и количество отзывов товара.

06Кабинет администратора

Доступен только администратору. Для заказов и переписки использовать страницы менеджера, отдельные копии не создавать.

Продажи admin.html

Вывести показатели и графики за последние 12 месяцев: выручка по месяцам, количество заказов по месяцам, распределение заказов по статусам и топ-5 ноутбуков по выручке. Выручку считать только по доставленным заказам, по сохранённым ценам и количеству. Все значения брать из базы.

Ноутбуки admin-laptops.html

Список товаров: фото, название, бренд, цена, остаток и публикация. Добавить переходы к созданию и редактированию, при большом списке — пагинацию. Снятый с публикации товар остаётся в админке и старых заказах.

Создание и редактирование ноутбука admin-laptop.html

Одна форма для двух режимов: бренд, название, уникальный адрес (slug), цена, остаток, характеристики, описание, несколько фотографий и публикация. Фото можно добавлять и удалять, одно используется на карточке каталога. Цена и остаток не могут быть отрицательными. Товары, связанные с заказами, не удалять: снимать с публикации.

Бренды admin-brands.html

Список, добавление и редактирование брендов: название и уникальный slug. Товары связываются с брендом и показываются в соответствующем фильтре.

Пользователи admin-users.html

Список имён, почты и ролей. Администратор может назначить покупателя, менеджера или администратора. Свою роль менять нельзя. Изменённые права должны действовать при следующем запросе пользователя.

07Наполнение и запуск

• Заполнить магазин данными с помощью ИИ. Подготовить описания ноутбуков, тексты информационных страниц и демонстрационные данные для проверки интерфейса. Характеристики, цены и сведения о магазине проверить вручную; демонстрационные отзывы и заказы не выдавать за реальные.
• Купить домен. Выбрать и зарегистрировать подходящее доменное имя для магазина.
• Развернуть сайт на хостинге. Выбрать хостинг с поддержкой Laravel и MySQL, загрузить проект, настроить окружение, базу данных, хранение изображений и отправку писем для восстановления пароля. Отключить режим отладки.
• Подключить домен и HTTPS. Настроить DNS и SSL-сертификат, проверить открытие сайта по основному адресу через защищённое соединение.
• Проверить после публикации. Пройти регистрацию, вход, восстановление пароля, оформление заказа, переписку и работу кабинетов. Проверить изображения, формы и мобильную версию.

08Что считать готовым результатом

• Можно пройти весь путь: найти ноутбук → добавить в корзину → войти → оформить заказ → получить ответ менеджера → увидеть изменение статуса.
• Товары, пользователи, отзывы, заказы и сообщения хранятся в базе. Изменения из кабинетов видны на соответствующих страницах.
• Есть миграции и сидеры: несколько брендов, не менее 12 товаров, отзывы, заказы за 12 месяцев и по одной тестовой учётной записи каждой роли.
• Проверены пустые списки, неверные данные форм, отсутствие товара, превышение остатка и попытки открыть чужой заказ или закрытый раздел.
• Сайт доступен на хостинге по собственному домену через HTTPS и заполнен проверенными данными.
• Сайт работает на компьютере и телефоне. Есть краткая инструкция по запуску проекта и данные тестовых аккаунтов.